<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getTravelNoteList,
  auditTravelNote,
  aiAuditTravelNote,
  aiAuditTravelNotesBatch
} from '@/api/travelNote'
import {
  getTravelPlanList,
  auditTravelPlan,
  aiAuditTravelPlan,
  aiAuditTravelPlansBatch
} from '@/api/travelPlan'
import {
  Edit,
  Check,
  Close,
  View,
  MagicStick,
  Position
} from '@element-plus/icons-vue'

const contentType = ref('travelNote')

const activeTab = ref('pending')

const statistics = ref({
  pending: 0,
  approved: 0,
  rejected: 0
})

const pendingList = ref([])
const pendingLoading = ref(false)
const pendingTotal = ref(0)
const pendingParams = ref({
  page: 1,
  pageSize: 20
})

const approvedList = ref([])
const approvedLoading = ref(false)
const approvedTotal = ref(0)
const approvedParams = ref({
  page: 1,
  pageSize: 20
})

const rejectedList = ref([])
const rejectedLoading = ref(false)
const rejectedTotal = ref(0)
const rejectedParams = ref({
  page: 1,
  pageSize: 20
})

const detailDialogVisible = ref(false)
const currentNote = ref(null)

const loadStatistics = async () => {
  try {
    const apiFunc =
      contentType.value === 'travelNote' ? getTravelNoteList : getTravelPlanList

    const allResult = await apiFunc({
      page: 1,
      pageSize: 1000
    })

    if (allResult.success) {
      let allData = []

      if (Array.isArray(allResult.data)) {
        allData = allResult.data
      } else if (allResult.data.list) {
        allData = allResult.data.list
      }

      statistics.value.pending = allData.filter(
        (item) => item.status === 'pending'
      ).length
      statistics.value.approved = allData.filter(
        (item) => item.status === 'approved'
      ).length
      statistics.value.rejected = allData.filter(
        (item) => item.status === 'rejected'
      ).length
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

const loadPendingList = async () => {
  pendingLoading.value = true
  try {
    const apiFunc =
      contentType.value === 'travelNote' ? getTravelNoteList : getTravelPlanList
    const result = await apiFunc({
      status: 'pending',
      ...pendingParams.value
    })
    if (result.success) {
      if (Array.isArray(result.data)) {
        const filteredData = result.data.filter(
          (item) => item.status === 'pending'
        )
        pendingList.value = filteredData
        pendingTotal.value = filteredData.length
      } else if (result.data.list) {
        pendingList.value = result.data.list || []
        pendingTotal.value = result.data.total || 0
      } else {
        pendingList.value = []
        pendingTotal.value = 0
      }
    }
  } catch (error) {
    console.error('加载待审核列表失败:', error)
  } finally {
    pendingLoading.value = false
  }
}

const loadApprovedList = async () => {
  approvedLoading.value = true
  try {
    const apiFunc =
      contentType.value === 'travelNote' ? getTravelNoteList : getTravelPlanList
    const result = await apiFunc({
      status: 'approved',
      ...approvedParams.value
    })
    if (result.success) {
      if (Array.isArray(result.data)) {
        const filteredData = result.data.filter(
          (item) => item.status === 'approved'
        )
        approvedList.value = filteredData
        approvedTotal.value = filteredData.length
      } else if (result.data.list) {
        approvedList.value = result.data.list || []
        approvedTotal.value = result.data.total || 0
      } else {
        approvedList.value = []
        approvedTotal.value = 0
      }
    }
  } catch (error) {
    console.error('加载已通过列表失败:', error)
  } finally {
    approvedLoading.value = false
  }
}

const loadRejectedList = async () => {
  rejectedLoading.value = true
  try {
    const apiFunc =
      contentType.value === 'travelNote' ? getTravelNoteList : getTravelPlanList
    const result = await apiFunc({
      status: 'rejected',
      ...rejectedParams.value
    })
    if (result.success) {
      if (Array.isArray(result.data)) {
        const filteredData = result.data.filter(
          (item) => item.status === 'rejected'
        )
        rejectedList.value = filteredData
        rejectedTotal.value = filteredData.length
      } else if (result.data.list) {
        rejectedList.value = result.data.list || []
        rejectedTotal.value = result.data.total || 0
      } else {
        rejectedList.value = []
        rejectedTotal.value = 0
      }
    }
  } catch (error) {
    console.error('加载已拒绝列表失败:', error)
  } finally {
    rejectedLoading.value = false
  }
}

const handleQuickApprove = async (id) => {
  try {
    const auditFunc =
      contentType.value === 'travelNote' ? auditTravelNote : auditTravelPlan
    const result = await auditFunc(id, 'approved')
    if (result.success) {
      ElMessage.success('审核通过')
      loadPendingList()
      loadStatistics()
    } else {
      ElMessage.error(result.message || '审核失败')
    }
  } catch (error) {
    console.error('审核失败:', error)
    ElMessage.error('审核失败')
  }
}

const handleQuickReject = async (id) => {
  try {
    await ElMessageBox.prompt('请输入拒绝原因（可选）', '拒绝审核', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputType: 'textarea',
      inputPlaceholder: '拒绝原因...'
    }).then(async ({ value }) => {
      const auditFunc =
        contentType.value === 'travelNote' ? auditTravelNote : auditTravelPlan
      const result = await auditFunc(id, 'rejected', value || '')
      if (result.success) {
        ElMessage.success('已拒绝')
        loadPendingList()
        loadStatistics()
      } else {
        ElMessage.error(result.message || '操作失败')
      }
    })
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作失败:', error)
    }
  }
}

const handleAiAudit = async (id) => {
  const typeName = contentType.value === 'travelNote' ? '游记' : '旅行计划'
  try {
    await ElMessageBox.confirm(
      `确定使用 AI 审核这篇${typeName}吗？AI 将自动分析内容并给出审核建议。`,
      'AI 审核',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const loadingInstance = ElMessage({
      message: 'AI 正在审核中，请稍候...',
      type: 'info',
      duration: 0,
      icon: MagicStick
    })

    try {
      const aiFunc =
        contentType.value === 'travelNote'
          ? aiAuditTravelNote
          : aiAuditTravelPlan
      const result = await aiFunc(id)
      loadingInstance.close()

      if (result.success) {
        const status = result.data.status
        const reason = result.data.reason || ''
        const details = result.data.details || {}

        const getResultIcon = (passed) => (passed ? '✅' : '❌')

        const detailItems = Object.entries(details)
          .map(([field, detail]) => {
            const fieldNames = {
              coverImage: '封面',
              title: '标题',
              description: '简介',
              content: '内容'
            }
            const fieldName = fieldNames[field] || field
            const icon = getResultIcon(detail.passed)
            const score = detail.score || 0

            return `${icon} ${fieldName} (${score}分)`
          })
          .join(' · ')

        const passedCount = Object.values(details).filter(
          (d) => d.passed
        ).length
        const totalCount = Object.values(details).length

        const resultTitle =
          status === 'approved'
            ? `<div style="color: #67c23a; font-size: 20px; font-weight: 600; margin-bottom: 16px;">✅ AI 审核通过</div>`
            : `<div style="color: #f56c6c; font-size: 20px; font-weight: 600; margin-bottom: 16px;">❌ AI 审核未通过</div>`

        await ElMessageBox.alert(
          `
            <div style="text-align: center; padding: 0 20px;">
              ${resultTitle}
              <div style="background: #f5f7fa; padding: 16px; border-radius: 8px; margin-bottom: 20px;">
                <div style="color: #303133; font-size: 15px; line-height: 1.6;">
                  ${reason}
                </div>
              </div>
              <div style="color: #606266; font-size: 14px; line-height: 1.8;">
                ${detailItems}
              </div>
              <div style="margin-top: 16px; color: #909399; font-size: 13px;">
                通过率: ${passedCount}/${totalCount}
              </div>
            </div>
          `,
          'AI 审核结果',
          {
            confirmButtonText: '知道了',
            dangerouslyUseHTMLString: true,
            customClass: 'ai-audit-result-dialog'
          }
        )

        loadPendingList()
        loadStatistics()
      } else {
        ElMessage.error(result.message || 'AI 审核失败')
      }
    } catch (error) {
      loadingInstance.close()
      console.error('AI 审核失败:', error)
      ElMessage.error('AI 审核失败，请稍后重试')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作取消:', error)
    }
  }
}

const handleBatchAiAudit = async () => {
  if (pendingList.value.length === 0) {
    ElMessage.warning('当前页暂无待审核内容')
    return
  }

  const typeName = contentType.value === 'travelNote' ? '游记' : '旅行计划'

  try {
    await ElMessageBox.confirm(
      `确定对当前页 ${pendingList.value.length} 条待审核${typeName}进行批量 AI 审核吗？`,
      '批量 AI 审核',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const loadingInstance = ElMessage({
      message: 'AI 正在批量审核中，请稍候...',
      type: 'info',
      duration: 0,
      icon: MagicStick
    })

    try {
      const ids = pendingList.value.map((item) => item.id)
      const batchFunc =
        contentType.value === 'travelNote'
          ? aiAuditTravelNotesBatch
          : aiAuditTravelPlansBatch
      const result = await batchFunc(ids)
      loadingInstance.close()

      if (result.success) {
        ElMessage.success({
          message: `批量 AI 审核完成！共审核 ${ids.length} 条${typeName}`,
          duration: 3000
        })
        loadPendingList()
        loadStatistics()
      } else {
        ElMessage.error(result.message || '批量 AI 审核失败')
      }
    } catch (error) {
      loadingInstance.close()
      console.error('批量 AI 审核失败:', error)
      ElMessage.error('批量 AI 审核失败，请稍后重试')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作取消:', error)
    }
  }
}

const handleViewDetail = async (row) => {
  currentNote.value = row
  detailDialogVisible.value = true
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const truncateText = (text, length = 30) => {
  if (!text) return '-'
  return text.length > length ? text.substring(0, length) + '...' : text
}

const getStatusType = (status) => {
  const typeMap = {
    draft: 'info',
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status) => {
  const textMap = {
    draft: '草稿',
    pending: '审核中',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return textMap[status] || '未知'
}

const getVisibilityText = (visibility) => {
  return visibility === 'public' ? '公开' : '私密'
}

const parseTags = (tags) => {
  if (!tags) return []
  if (Array.isArray(tags)) return tags
  if (typeof tags === 'string') {
    try {
      const parsed = JSON.parse(tags)
      return Array.isArray(parsed) ? parsed : []
    } catch (e) {
      return tags
        .split(',')
        .map((t) => t.trim())
        .filter(Boolean)
    }
  }
  return []
}

const handleTabChange = (tab) => {
  if (tab === 'pending') {
    loadPendingList()
  } else if (tab === 'approved') {
    loadApprovedList()
  } else if (tab === 'rejected') {
    loadRejectedList()
  }
}

const handlePendingPageChange = (page) => {
  pendingParams.value.page = page
  loadPendingList()
}

const handlePendingSizeChange = (size) => {
  pendingParams.value.pageSize = size
  pendingParams.value.page = 1
  loadPendingList()
}

const handleApprovedPageChange = (page) => {
  approvedParams.value.page = page
  loadApprovedList()
}

const handleApprovedSizeChange = (size) => {
  approvedParams.value.pageSize = size
  approvedParams.value.page = 1
  loadApprovedList()
}

const handleRejectedPageChange = (page) => {
  rejectedParams.value.page = page
  loadRejectedList()
}

const handleRejectedSizeChange = (size) => {
  rejectedParams.value.pageSize = size
  rejectedParams.value.page = 1
  loadRejectedList()
}

const handleContentTypeChange = (type) => {
  contentType.value = type
  activeTab.value = 'pending'
  loadStatistics()
  loadPendingList()
}

onMounted(() => {
  loadStatistics()
  loadPendingList()
})
</script>

<template>
  <div class="content-manage">
    <div class="page-header">
      <h2 class="page-title">📝 审核管理</h2>

      <el-radio-group
        v-model="contentType"
        @change="handleContentTypeChange"
        class="content-type-switch"
      >
        <el-radio-button value="travelNote">
          <el-icon><Edit /></el-icon>
          游记审核
        </el-radio-button>
        <el-radio-button value="travelPlan">
          <el-icon><Position /></el-icon>
          旅行计划审核
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="statistics-grid">
      <el-card
        class="stat-card pending"
        shadow="hover"
        @click="
          () => {
            activeTab = 'pending'
            loadPendingList()
          }
        "
      >
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon :size="32"><Edit /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.pending }}</div>
            <div class="stat-label">待审核</div>
          </div>
        </div>
      </el-card>

      <el-card
        class="stat-card approved"
        shadow="hover"
        @click="
          () => {
            activeTab = 'approved'
            loadApprovedList()
          }
        "
      >
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon :size="32"><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.approved }}</div>
            <div class="stat-label">已通过</div>
          </div>
        </div>
      </el-card>

      <el-card
        class="stat-card rejected"
        shadow="hover"
        @click="
          () => {
            activeTab = 'rejected'
            loadRejectedList()
          }
        "
      >
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon :size="32"><Close /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.rejected }}</div>
            <div class="stat-label">已拒绝</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-card class="content-card">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane name="pending">
          <template #label>
            <el-badge :value="statistics.pending" :max="99" type="warning">
              <span>⏳ 待审核</span>
            </el-badge>
          </template>

          <div class="pending-section">
            <div class="batch-actions" v-if="pendingList.length > 0">
              <el-button
                type="warning"
                :icon="MagicStick"
                @click="handleBatchAiAudit"
              >
                批量 AI 审核当前页 ({{ pendingList.length }})
              </el-button>
              <span class="tips"
                >当前显示第 {{ pendingParams.page }} 页，共
                {{ pendingTotal }} 条</span
              >
            </div>

            <el-table
              :data="pendingList"
              v-loading="pendingLoading"
              border
              stripe
            >
              <el-table-column label="封面" width="80">
                <template #default="{ row }">
                  <el-image
                    v-if="row.cover_image"
                    :src="row.cover_image"
                    fit="cover"
                    style="
                      width: 50px;
                      height: 50px;
                      border-radius: 4px;
                      cursor: pointer;
                    "
                    :preview-src-list="[row.cover_image]"
                    :z-index="9999"
                    preview-teleported
                  />
                  <span v-else style="color: #999; font-size: 12px">无</span>
                </template>
              </el-table-column>

              <el-table-column prop="title" label="标题" min-width="200">
                <template #default="{ row }">
                  {{ truncateText(row.title, 25) }}
                </template>
              </el-table-column>

              <el-table-column prop="city" label="城市" width="100" />

              <el-table-column label="作者" width="120">
                <template #default="{ row }">
                  {{ row.author?.nickname || row.author?.username || '-' }}
                </template>
              </el-table-column>

              <el-table-column label="提交时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="340" fixed="right">
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    :icon="Check"
                    @click="handleQuickApprove(row.id)"
                  >
                    通过
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Close"
                    @click="handleQuickReject(row.id)"
                  >
                    拒绝
                  </el-button>
                  <el-button
                    type="warning"
                    size="small"
                    :icon="MagicStick"
                    @click="handleAiAudit(row.id)"
                  >
                    AI审核
                  </el-button>
                  <el-button
                    type="info"
                    size="small"
                    :icon="View"
                    @click="handleViewDetail(row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div v-if="pendingList.length === 0" class="empty-state">
              <el-empty description="暂无待审核内容" />
            </div>

            <el-pagination
              v-if="pendingTotal > 0"
              class="pagination"
              :current-page="pendingParams.page"
              :page-size="pendingParams.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pendingTotal"
              @current-change="handlePendingPageChange"
              @size-change="handlePendingSizeChange"
              background
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="✅ 已通过" name="approved">
          <div class="approved-section">
            <el-table
              :data="approvedList"
              v-loading="approvedLoading"
              border
              stripe
            >
              <el-table-column label="封面" width="80">
                <template #default="{ row }">
                  <el-image
                    v-if="row.cover_image"
                    :src="row.cover_image"
                    fit="cover"
                    style="
                      width: 50px;
                      height: 50px;
                      border-radius: 4px;
                      cursor: pointer;
                    "
                    :preview-src-list="[row.cover_image]"
                    :z-index="9999"
                    preview-teleported
                  />
                  <span v-else style="color: #999; font-size: 12px">无</span>
                </template>
              </el-table-column>

              <el-table-column prop="title" label="标题" min-width="200">
                <template #default="{ row }">
                  {{ truncateText(row.title, 25) }}
                </template>
              </el-table-column>

              <el-table-column prop="city" label="城市" width="100" />

              <el-table-column label="作者" width="120">
                <template #default="{ row }">
                  {{ row.author?.nickname || row.author?.username || '-' }}
                </template>
              </el-table-column>

              <el-table-column label="数据" width="150">
                <template #default="{ row }">
                  <div style="font-size: 12px">
                    👁️ {{ row.view_count || 0 }} | 👍
                    {{ row.like_count || 0 }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="通过时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.published_at) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    size="small"
                    :icon="View"
                    @click="handleViewDetail(row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div v-if="approvedList.length === 0" class="empty-state">
              <el-empty description="暂无已通过内容" />
            </div>

            <el-pagination
              v-if="approvedTotal > 0"
              class="pagination"
              :current-page="approvedParams.page"
              :page-size="approvedParams.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="approvedTotal"
              @current-change="handleApprovedPageChange"
              @size-change="handleApprovedSizeChange"
              background
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="❌ 已拒绝" name="rejected">
          <div class="rejected-section">
            <el-table
              :data="rejectedList"
              v-loading="rejectedLoading"
              border
              stripe
            >
              <el-table-column label="封面" width="80">
                <template #default="{ row }">
                  <el-image
                    v-if="row.cover_image"
                    :src="row.cover_image"
                    fit="cover"
                    style="
                      width: 50px;
                      height: 50px;
                      border-radius: 4px;
                      cursor: pointer;
                    "
                    :preview-src-list="[row.cover_image]"
                    :z-index="9999"
                    preview-teleported
                  />
                  <span v-else style="color: #999; font-size: 12px">无</span>
                </template>
              </el-table-column>

              <el-table-column prop="title" label="标题" min-width="200">
                <template #default="{ row }">
                  {{ truncateText(row.title, 25) }}
                </template>
              </el-table-column>

              <el-table-column prop="city" label="城市" width="100" />

              <el-table-column label="作者" width="120">
                <template #default="{ row }">
                  {{ row.author?.nickname || row.author?.username || '-' }}
                </template>
              </el-table-column>

              <el-table-column label="拒绝原因" width="200">
                <template #default="{ row }">
                  {{ truncateText(row.audit_reason || '无', 20) }}
                </template>
              </el-table-column>

              <el-table-column label="拒绝时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.updated_at) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    size="small"
                    :icon="View"
                    @click="handleViewDetail(row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div v-if="rejectedList.length === 0" class="empty-state">
              <el-empty description="暂无已拒绝内容" />
            </div>

            <el-pagination
              v-if="rejectedTotal > 0"
              class="pagination"
              :current-page="rejectedParams.page"
              :page-size="rejectedParams.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rejectedTotal"
              @current-change="handleRejectedPageChange"
              @size-change="handleRejectedSizeChange"
              background
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog
      v-model="detailDialogVisible"
      :title="contentType === 'travelNote' ? '游记详情' : '旅行计划详情'"
      width="900px"
      top="5vh"
    >
      <div
        v-if="currentNote && contentType === 'travelNote'"
        class="note-detail"
      >
        <el-descriptions :column="2" border>
          <el-descriptions-item label="游记ID">{{
            currentNote.id
          }}</el-descriptions-item>
          <el-descriptions-item label="作者">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-avatar :size="30" :src="currentNote.author?.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <span>
                {{
                  currentNote.author?.nickname ||
                  currentNote.author?.username ||
                  '-'
                }}
                (ID: {{ currentNote.user_id }})
              </span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="标题" :span="2">{{
            currentNote.title
          }}</el-descriptions-item>
          <el-descriptions-item label="城市">{{
            currentNote.city
          }}</el-descriptions-item>
          <el-descriptions-item label="旅行日期">
            {{ currentNote.start_date || '-' }} ~
            {{ currentNote.end_date || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentNote.status)">
              {{ getStatusText(currentNote.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可见性">
            <el-tag
              :type="currentNote.visibility === 'public' ? 'success' : 'info'"
            >
              {{ getVisibilityText(currentNote.visibility) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="封面图片" :span="2">
            <el-image
              v-if="currentNote.cover_image"
              :src="currentNote.cover_image"
              fit="contain"
              style="max-width: 400px; max-height: 300px"
              :preview-src-list="[currentNote.cover_image]"
              :z-index="9999"
              preview-teleported
            />
            <span v-else>无封面</span>
          </el-descriptions-item>
          <el-descriptions-item label="简介" :span="2">
            {{ currentNote.description || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="标签" :span="2">
            <el-tag
              v-for="(tag, index) in parseTags(currentNote.tags)"
              :key="index"
              style="margin-right: 8px"
              size="small"
            >
              {{ tag }}
            </el-tag>
            <span v-if="parseTags(currentNote.tags).length === 0">无标签</span>
          </el-descriptions-item>
          <el-descriptions-item label="统计数据" :span="2">
            👁️ 浏览: {{ currentNote.view_count || 0 }} | 👍 点赞:
            {{ currentNote.like_count || 0 }} | ⭐ 收藏:
            {{ currentNote.favorite_count || 0 }} | 💬 评论:
            {{ currentNote.comment_count || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="特殊标记" :span="2">
            <el-tag
              v-if="currentNote.is_featured"
              type="danger"
              style="margin-right: 8px"
              >精选</el-tag
            >
            <el-tag v-if="currentNote.is_top" type="warning">置顶</el-tag>
            <span v-if="!currentNote.is_featured && !currentNote.is_top"
              >无</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="发布时间" :span="2">
            {{ formatDate(currentNote.published_at) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(currentNote.created_at) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDate(currentNote.updated_at) }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="content-section">
          <h3>游记内容</h3>
          <div class="content-box" v-html="currentNote.content"></div>
        </div>
      </div>

      <div
        v-if="currentNote && contentType === 'travelPlan'"
        class="plan-detail"
      >
        <el-descriptions :column="2" border>
          <el-descriptions-item label="计划ID">{{
            currentNote.id
          }}</el-descriptions-item>
          <el-descriptions-item label="作者">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-avatar :size="30" :src="currentNote.author?.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <span>
                {{
                  currentNote.author?.nickname ||
                  currentNote.author?.username ||
                  '-'
                }}
                (ID: {{ currentNote.userId || currentNote.user_id }})
              </span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="标题" :span="2">{{
            currentNote.title
          }}</el-descriptions-item>
          <el-descriptions-item label="目的地城市">{{
            currentNote.cityName || currentNote.city || '-'
          }}</el-descriptions-item>
          <el-descriptions-item label="旅行天数">
            {{ currentNote.days || '-' }} 天
          </el-descriptions-item>
          <el-descriptions-item label="开始日期">{{
            currentNote.startDate || currentNote.start_date || '-'
          }}</el-descriptions-item>
          <el-descriptions-item label="结束日期">{{
            currentNote.endDate || currentNote.end_date || '-'
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentNote.status)">
              {{ getStatusText(currentNote.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可见性">
            <el-tag :type="currentNote.isPublic ? 'success' : 'info'">
              {{ currentNote.isPublic ? '公开' : '私密' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(currentNote.created_at || currentNote.createdAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDate(currentNote.updated_at || currentNote.updatedAt) }}
          </el-descriptions-item>
        </el-descriptions>

        <div
          class="content-section"
          v-if="currentNote.dailyPlans || currentNote.days_detail"
        >
          <h3>行程安排</h3>
          <div class="daily-plans">
            <div
              v-for="(day, index) in currentNote.dailyPlans ||
              currentNote.days_detail ||
              []"
              :key="index"
              class="day-item"
            >
              <h4>第 {{ day.day }} 天</h4>
              <el-timeline>
                <el-timeline-item
                  v-for="(item, itemIndex) in day.locations || day.items || []"
                  :key="itemIndex"
                  :timestamp="item.time || ''"
                  placement="top"
                >
                  <div class="timeline-item">
                    <div class="timeline-title">
                      {{ item.title || item.name || '-' }}
                    </div>
                    <div class="timeline-location">
                      {{ item.location || item.note || '-' }}
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.content-manage {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.content-type-switch {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.content-type-switch :deep(.el-radio-button__inner) {
  padding: 10px 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-type-switch :deep(.el-icon) {
  font-size: 16px;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.stat-card.pending .stat-icon {
  background: #fdf6ec;
  color: #e6a23c;
}

.stat-card.approved .stat-icon {
  background: #f0f9ff;
  color: #67c23a;
}

.stat-card.rejected .stat-icon {
  background: #fef0f0;
  color: #f56c6c;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 内容卡片 */
.content-card {
  border-radius: 8px;
}

.pending-section,
.approved-section,
.rejected-section {
  padding: 20px;
}

.batch-actions {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tips {
  font-size: 14px;
  color: #909399;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.note-detail,
.plan-detail {
  max-height: 75vh;
  overflow-y: auto;
}

.content-section {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.content-section h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.content-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-height: 200px;
  line-height: 1.8;
  color: #606266;
  font-size: 14px;
}

.content-box :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0;
}

.content-box :deep(p) {
  margin: 10px 0;
}

.daily-plans {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.day-item {
  margin-bottom: 30px;
}

.day-item:last-child {
  margin-bottom: 0;
}

.day-item h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
  display: inline-block;
}

.timeline-item {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #409eff;
}

.timeline-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #303133;
  font-size: 15px;
}

.timeline-location {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
}

/* AI审核结果弹窗样式 */
:deep(.ai-audit-result-dialog) {
  max-width: 650px;
}

:deep(.ai-audit-result-dialog .el-message-box__container) {
  justify-content: center;
  align-items: center;
}

:deep(.ai-audit-result-dialog .el-message-box__header) {
  text-align: center;
}

:deep(.ai-audit-result-dialog .el-message-box__message) {
  max-height: 70vh;
  overflow-y: auto;
  text-align: center;
}

:deep(.ai-audit-result-dialog .el-message-box__message::-webkit-scrollbar) {
  width: 6px;
}

:deep(
    .ai-audit-result-dialog .el-message-box__message::-webkit-scrollbar-thumb
  ) {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

:deep(.ai-audit-result-dialog .el-message-box__btns) {
  text-align: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .content-manage {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .content-type-switch {
    width: 100%;
  }

  .content-type-switch :deep(.el-radio-button) {
    flex: 1;
  }

  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-value {
    font-size: 24px;
  }

  .batch-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>
